<template lang="pug">
.pageL-list-edit
  el-dialog(title="编辑落地页" v-model="dialogVisible" @close="handleClose" custom-class="dialog-width")
    el-scrollbar.scrollbar-dialog-wrap

      el-form(:model="state.form" ref="valiForm" :rules='state.forms' label-width="100px").form-width
        el-form-item(label="落地页名称:" prop='name')
          el-input(v-model="state.form.name" placeholder='落地页名称').form-input
        el-form-item(label="落地页介绍:" prop='dec')
          el-input(v-model="state.form.dec" placeholder='落地页介绍').form-input
        el-form-item(label="价格:" prop='price').form-icon-no
          el-input(v-model="state.form.price" placeholder='价格').form-input

        el-form-item(label="缩略图:" prop='').avatar-uploader
          el-upload(:on-change="handleSLT" :show-file-list="false" :auto-upload="false" action="").upload-img-list
            img(v-if="state.imageUrl" :src="state.imageUrl" class="avatar")
            i(v-else class="el-icon-plus avatar-uploader-icon")

        el-form-item
          el-button(@click="formSubmit('valiForm')" type="primary" size="small" :lodading="loading") 确定
          el-button(@click="handleClose" type="danger" size="small") 取消
</template>

<script setup>
import { validateNumber } from '../../utils/validate'

import { ref, reactive, getCurrentInstance, watch, defineProps, defineEmit } from 'vue'

const { proxy } = getCurrentInstance()
const emit = defineEmit(['closeFun', 'update:isDialog'])
const props = defineProps({
  isDialog: {
    required: true
  },
  dialogRecord: {
    required: true
  }
})

const state = reactive({
  form: {
    id: '',
    name: '',
    dec: '',
    price: ''
  },
  forms: {
    name: [{ required: true, message: '落地页名称', trigger: 'blur' }],
    dec: [{ required: true, message: '落地页介绍', trigger: 'blur' }],
    price: [{ required: true, validator: (rule, value, callback) => { validateNumber(value, callback) }, trigger: 'blur' }]
  },
  imageUrl: '',
  file: ''
})
const valiForm = ref()
const dialogVisible = ref(false)
const loading = ref(false)

// 侦听
watch(() => [props.isDialog], ([newDialog, oldDialog]) => {
  if (!newDialog) return

  for (const key in state.form) {
    state.form[key] = props.dialogRecord[key]
  }

  state.imageUrl = ''
  state.file = ''
  dialogVisible.value = newDialog
}, { immediate: true })

// 选择图片
function handleSLT (file) {
  const isLt2M = file.size / 1024 / 1024 < 0.6
  if (!isLt2M) {
    proxy.$message.error('上传图片大小不能超过 600KB!')
    return
  }
  state.imageUrl = URL.createObjectURL(file.raw)
  state.file = file.raw
}

// 表达提交
function formSubmit (form) {
  valiForm.value.validate((valid) => {
    if (valid) {
      loading.value = true

      const param = new FormData()
      for (const key in state.form) {
        param.append(key, state.form[key])
      }
      if (state.file) param.append('file', state.file, state.file.name)

      console.log(param)
      proxy.$message({ type: 'success', message: '提交成功' })
      emit('closeFun')
      handleClose()
    } else {
      return false
    }
  })
}

// 关闭弹窗
function handleClose () {
  emit('update:isDialog', false)
  dialogVisible.value = false
}
</script>
<style rel="stylesheet/scss" lang="scss">
</style>
